<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh" v-if="Object.values(userinfo).length != 0">
      <!-- 头像 -->
      <view class="avatar" @click="chooseavatar">
        <image :src="imgUrl + userinfo.avatar" mode="aspectFill" style="width: 110rpx; height: 110rpx; border-radius: 100rpx; border: 2rpx solid #000"></image>
      </view>
      <!-- 个人信息 -->
      <view class="infobox">
        <view class="infoitem">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">姓名</view>
          <input type="text" v-model="userinfo.username" style="text-align: right" @blur="changename" />
        </view>
        <view class="infoitem" @click="gochangephone">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">手机号</view>
          <view>
            {{ userinfo.mobile4 }}
            <uni-icons type="right" size="15"></uni-icons>
          </view>
        </view>
        <view class="infoitem">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">微信昵称</view>
          <view>{{ userinfo.nickname }}</view>
        </view>
        <view class="infoitem" @click="$refs.gender.open()">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">性别</view>
          <view>
            {{ userinfo.gender == 1 ? '女' : '男' }}
            <uni-icons type="right" size="15"></uni-icons>
          </view>
        </view>
        <view class="infoitem">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">出生日期</view>
          <view style="display: flex">
            <!-- 出生日期选择 -->
            <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
              <view class="uni-input">{{ userinfo.birthday ? userinfo.birthday : date }}</view>
            </picker>
            <uni-icons type="right" size="15"></uni-icons>
          </view>
        </view>
        <!-- 在读学校 -->
        <view class="infoitem">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">学员在读学校</view>
          <input type="text" v-model="userinfo.school" @blur="changeschool" style="width: 500rpx; text-align: right" placeholder="请输入学校名称" />
        </view>
        <!-- 在读年级 -->
        <view class="infoitem" @click="$refs.grade.open()">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">在读年级</view>
          <view>
            {{ userinfo.grade_name }}
            <uni-icons type="right" size="15"></uni-icons>
          </view>
        </view>
        <!-- 详细地址 -->
        <view class="infoitem">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">详细地址</view>
          <input type="text" v-model="userinfo.address" @blur="saveaddress" style="text-align: right; flex: 1; padding-left: 30rpx" />
        </view>
      </view>
      <view class="savebtn" @click="savebtn">保存</view>
      <!-- 性别选择 -->
      <uni-popup ref="gender" type="bottom">
        <view class="genderbox">
          <view class="boxheader">
            <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; color: #030303" @click="$refs.gender.close()">取消</view>
            <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; color: #3553e8" @click="okbtn">完成</view>
          </view>
          <picker-view indicator-style="height: 50px;" style="height: 400rpx" :value="value" @change="bindChange">
            <picker-view-column>
              <view v-for="(item, index) in genderlist" :key="index" style="text-align: center; line-height: 100rpx">
                {{ item }}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
      </uni-popup>
      <!-- 在读年级 -->
      <uni-popup ref="grade" type="bottom">
        <view class="genderbox">
          <view class="boxheader">
            <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; color: #030303" @click="$refs.grade.close()">取消</view>
            <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; color: #3553e8" @click="gradeok">完成</view>
          </view>
          <picker-view indicator-style="height: 50px;" style="height: 400rpx" :value="value" @change="gradeChange">
            <picker-view-column>
              <view v-for="(item, index) in gradelist" :key="index" style="text-align: center; line-height: 100rpx">
                {{ item.name }}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
      </uni-popup>
    </scroll-view>
  </view>
</template>

<script>
import { onLoad } from 'uview-ui/libs/mixin/mixin';
export default {
  data() {
    const currentDate = this.getDate({
      format: true
    });
    return {
      imgUrl: '', // 图片的基地址
      userinfo: {}, // 获取的用户信息
      value: [1],
      genderlist: ['', '女', '男'],
      date: currentDate,
      gradelist: []
    };
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {
    // 保存个人信息
    async savebtn() {
      const res = await uni.$http.post('/user/profileSave', {
        ...this.userinfo
      });
      console.log('保存个人信息', res);
      uni.showToast({
        title: res.data.msg,
        icon: 'none'
      });
    },
    // 获取个人信息
    async getuserinfo() {
      const res = await uni.$http.post('/user/profile');
      // console.log('个人信息', res);
      this.userinfo = res.data.data;
      delete this.userinfo.identity_role;
    },
    // 修改名字
    changename() {
      // this.userinfo.username = this.userinfo.username;
      uni.$http.post('/user/profileSave', {
        ...this.userinfo
      });
    },
    // 修改性别
    okbtn() {
      uni.$http.post('/user/profileSave', {
        ...this.userinfo
      });
      this.$refs.gender.close();
      // this.getuserinfo();
    },
    // 获取年级
    async getgrade() {
      const res = await uni.$http.post('/index/gradeList', {
        name: ''
      });
      console.log('年级列表', res);
      this.gradelist = res.data.data.list;
      this.userinfo.grade_name = res.data.data.list.filter((item) => {
        return item.id == this.userinfo.grade_id;
      })[0].name;
    },
    // 头像上传
    chooseavatar() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album'],
        sizeType: ['original', 'compressed'],
        success: (e) => {
          console.log('返回选择的头像', e);
          uni.uploadFile({
            url: this.upimg + '/api/common/upload',
            filePath: e.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: uni.getStorageSync('token')
            },
            success: (res) => {
              console.log(JSON.parse(res.data));
              this.userinfo.avatar = JSON.parse(res.data).data.url;
              uni.$http.post('/user/profileSave', {
                ...this.userinfo
              });
            }
          });
        }
      });
    },
    // 选择性别
    bindChange(e) {
      console.log(e.detail.value[0]);
      this.userinfo.gender = String(e.detail.value[0]);
    },
    // 出生日期改变
    bindDateChange(e) {
      console.log(e.detail.value);
      this.userinfo.birthday = e.detail.value;
      uni.$http.post('/user/profileSave', {
        ...this.userinfo
      });
    },
    // 修改学校
    changeschool() {
      uni.$http.post('/user/profileSave', {
        ...this.userinfo
      });
    },
    // 年级选择
    gradeChange(e) {
      console.log(e);
      this.userinfo.grade_id = this.gradelist[e.detail.value[0]].id;
      this.userinfo.grade_name = this.gradelist[e.detail.value[0]].name;
    },
    gradeok() {
      uni.$http.post('/user/profileSave', {
        ...this.userinfo
      });
      this.$refs.grade.close();
    },
    // 保存地址
    saveaddress() {
      uni.$http.post('/user/profileSave', {
        ...this.userinfo
      });
    },
    // 跳转到变更手机号
    gochangephone() {
      uni.navigateTo({
        url: '/parents/changephone/changephone?info=' + JSON.stringify(this.userinfo)
      });
    },

    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    }
  },
  async onLoad() {
    // 设置图片基地址
    this.imgUrl = this.imgurl;
  },
  async onShow() {
    // 获取个人信息
    await this.getuserinfo();
    this.getgrade();
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f9f9f9 !important;
}
.container {
  box-sizing: border-box;
  .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60rpx 0rpx;
  }
  .infobox {
    box-sizing: border-box;
    padding: 30rpx;
    width: 750rpx;
    background: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    .infoitem {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      border-bottom: 2rpx solid #f1f1f1;
      padding: 40rpx 0;
      font-size: 28rpx;
    }
  }
  .savebtn {
    box-sizing: border-box;
    width: 690rpx;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    color: #fff;
    margin: 20rpx 30rpx;
    background-color: #3553e8;
    border-radius: 100rpx;
  }
  .genderbox {
    box-sizing: border-box;
    width: 750rpx;
    height: 560rpx;
    padding: 40rpx;
    font-size: 28rpx;
    background: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    .boxheader {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
